<%@ page language="java" contentType="text/html; charset=UTF-8" pageEncoding="UTF-8" %>
<head>
    <link rel="stylesheet" href="${contextPath}/static/ace/assets/css/colorbox.min.css"/>
</head>
<%@ include file="/WEB-INF/common/taglibs.jsp" %>
<div class="main-content">
    <div class="main-content-inner">
        <%@include file="/WEB-INF/common/back/breadcrumb.jsp" %>
        <div class="page-content">
            <div>
                <ul class="ace-thumbnails clearfix">
                    <%--<c:forEach items="${obj.pics}" var="item" varStatus="status">
                        <li style="border: none; display: inline-block;margin-left: 15px;">
                            <a href="${item.appDownLoadFullUrl}" title="" data-rel="colorbox" class="cboxElement">
                                <img width="150" height="150" alt="150x150" src="${item.appDownLoadFullUrl}">
                            </a>
                        </li>
                    </c:forEach>--%>
                        <li style="border: none;">
                            <a href="${contextPath}/images/beauty/timg (2).jpg" title="" data-rel="colorbox" class="cboxElement">
                                <img width="150" height="150" alt="150x150" src="${contextPath}/images/beauty/timg (2).jpg">
                            </a>
                        </li>
                        <li style="border: none;">
                            <a href="${contextPath}/images/beauty/timg (3).jpg" title="" data-rel="colorbox" class="cboxElement">
                                <img width="150" height="150" alt="150x150" src="${contextPath}/images/beauty/timg (3).jpg">
                            </a>
                        </li>
                </ul>
            </div>
        </div>
    </div>
</div>
<script src="${contextPath}/static/ace/assets/js/jquery.colorbox.min.js"></script>
<script>
    $(document).ready(function () {
        var colorbox_params = {
            rel: 'colorbox',
            reposition: true,
            scalePhotos: true,
            scrolling: false,
            loop:true,
            previous: '<i class="ace-icon fa fa-arrow-left"></i>',
            next: '<i class="ace-icon fa fa-arrow-right"></i>',
            close: '&times;',
            current: '{current} of {total}',
            maxWidth: '100%',
            maxHeight: '100%',
            onOpen: function () {
                $overflow = document.body.style.overflow;
                document.body.style.overflow = 'hidden';
            },
            onClosed: function () {
                document.body.style.overflow = $overflow;
            },
            onComplete: function () {
                $.colorbox.resize();
            }
        };

        $('.ace-thumbnails [data-rel="colorbox"]').colorbox(colorbox_params);
        $("#cboxLoadingGraphic").html("<i class='ace-icon fa fa-spinner orange fa-spin'></i>");//let's add a custom loading icon


        $(document).one('ajaxloadstart.page', function (e) {
            $('#colorbox, #cboxOverlay').remove();
        });
    });
</script>